import React, { useState } from 'react';
import { 
  FileText, Database, Settings, Zap, Shield, Globe, 
  Calculator, BarChart3, AlertCircle, CheckCircle, Clock, Star,
  GitBranch, Users, ArrowRight, ArrowDown, Leaf, Factory, Truck
} from 'lucide-react';

const CarbonFootprintPRDDesign = ({ onNavigate }) => {
  const [activeSection, setActiveSection] = useState('overview');

  // 产品概览
  const productOverview = {
    version: 'v1.0',
    release_date: '2024-Q3',
    product_goal: '碳足迹管理系统致力于为企业提供全面的碳排放管理解决方案，从数据收集到目标达成，支持企业实现科学的碳中和路径',
    target_users: ['碳管理专员', '环境数据分析师', '可持续发展总监', '合规专员'],
    key_metrics: [
      { metric: '数据收集覆盖率', target: '≥95%', current: '85%' },
      { metric: '碳足迹计算精度', target: '≥99%', current: '92%' },
      { metric: '减排目标达成率', target: '≥90%', current: '70%' },
      { metric: '报告生成效率', target: '提升80%', current: 'baseline' }
    ]
  };

  // 功能需求
  const functionalRequirements = [
    {
      id: 'FR001',
      category: '数据管理',
      title: '碳排放数据收集与管理',
      priority: 'P0',
      description: '建立完整的碳排放数据收集、存储和管理体系',
      detailed_requirements: [
        {
          id: 'FR001.1',
          requirement: '多源数据接入',
          acceptance_criteria: [
            '支持能源账单、生产数据、交通记录等多种数据源',
            '提供API接口和文件上传两种接入方式',
            '支持实时数据同步和批量数据导入',
            '具备数据格式转换和标准化功能'
          ],
          technical_notes: '使用ETL框架处理多源数据，支持JSON、CSV、Excel等格式'
        },
        {
          id: 'FR001.2',
          requirement: '数据质量管理',
          acceptance_criteria: [
            '提供数据完整性和一致性检查',
            '支持异常数据识别和处理',
            '记录数据来源和变更历史',
            '提供数据质量评分和报告'
          ],
          technical_notes: '使用数据质量引擎进行规则检查和异常检测'
        }
      ]
    },
    {
      id: 'FR002',
      category: '计算引擎',
      title: '碳足迹计算与分析',
      priority: 'P0',
      description: '基于国际标准进行精确的碳足迹计算和多维度分析',
      detailed_requirements: [
        {
          id: 'FR002.1',
          requirement: '标准化计算框架',
          acceptance_criteria: [
            '支持GHG Protocol、ISO 14064等国际标准',
            '内置IPCC、DEFRA等权威排放因子库',
            '支持范围一、二、三分类计算',
            '提供产品生命周期碳足迹计算'
          ],
          technical_notes: '使用规则引擎管理计算逻辑，支持排放因子动态更新'
        },
        {
          id: 'FR002.2',
          requirement: '多维度分析',
          acceptance_criteria: [
            '提供按时间、部门、产品、地区的分析维度',
            '支持趋势分析和同比环比分析',
            '提供碳排放强度计算',
            '支持情景分析和敏感性分析'
          ],
          technical_notes: '使用OLAP技术实现多维分析，集成统计分析算法'
        }
      ]
    },
    {
      id: 'FR003',
      category: '目标管理',
      title: '减排目标设定与跟踪',
      priority: 'P1',
      description: '科学设定减排目标，实时跟踪减排进度和效果评估',
      detailed_requirements: [
        {
          id: 'FR003.1',
          requirement: '科学目标设定',
          acceptance_criteria: [
            '支持SBTi科学减排目标方法学',
            '提供基准年设定和目标年规划',
            '支持绝对减排和强度减排目标',
            '提供减排路径规划和情景分析'
          ],
          technical_notes: '集成SBTi计算模型，使用优化算法进行路径规划'
        },
        {
          id: 'FR003.2',
          requirement: '进度跟踪监控',
          acceptance_criteria: [
            '实时跟踪减排进度和达成率',
            '提供预警和偏差分析',
            '支持减排措施效果评估',
            '生成进度报告和建议'
          ],
          technical_notes: '使用仪表盘技术实现实时监控，集成预警算法'
        }
      ]
    },
    {
      id: 'FR004',
      category: '供应链管理',
      title: '供应链碳足迹管理',
      priority: 'P1',
      description: '扩展到供应链的碳足迹管理，实现全价值链碳中和',
      detailed_requirements: [
        {
          id: 'FR004.1',
          requirement: '供应商数据管理',
          acceptance_criteria: [
            '建立供应商碳排放数据收集体系',
            '提供供应商评估和分级工具',
            '支持供应商减排合作机制',
            '建立供应商碳足迹数据库'
          ],
          technical_notes: '使用供应商门户实现数据收集，集成评估算法'
        }
      ]
    },
    {
      id: 'FR005',
      category: '报告披露',
      title: '碳排放报告与披露',
      priority: 'P1',
      description: '自动生成符合各种标准的碳排放报告和披露文档',
      detailed_requirements: [
        {
          id: 'FR005.1',
          requirement: '多标准报告生成',
          acceptance_criteria: [
            '支持CDP、TCFD、SASB、GRI等报告标准',
            '提供可定制的报告模板',
            '支持中英文报告生成',
            '提供报告审核和审批流程'
          ],
          technical_notes: '使用报告引擎和模板引擎生成多格式报告'
        }
      ]
    }
  ];

  // 非功能需求
  const nonFunctionalRequirements = [
    {
      category: '性能要求',
      requirements: [
        {
          metric: '数据处理能力',
          target: '百万级数据点',
          description: '系统应支持处理百万级别的排放数据点'
        },
        {
          metric: '计算响应时间',
          target: '< 30秒',
          description: '大规模碳足迹计算响应时间不超过30秒'
        },
        {
          metric: '报告生成速度',
          target: '< 5分钟',
          description: '复杂报告生成时间不超过5分钟'
        }
      ]
    },
    {
      category: '安全要求',
      requirements: [
        {
          metric: '数据加密',
          target: 'AES-256',
          description: '敏感碳排放数据采用AES-256加密存储和传输'
        },
        {
          metric: '访问控制',
          target: 'RBAC+ABAC',
          description: '基于角色和属性的细粒度访问控制'
        },
        {
          metric: '审计日志',
          target: '100%覆盖',
          description: '记录所有数据变更和计算操作的完整审计日志'
        }
      ]
    },
    {
      category: '合规要求',
      requirements: [
        {
          metric: '国际标准',
          target: 'ISO 14064',
          description: '完全符合ISO 14064国际标准要求'
        },
        {
          metric: '数据质量',
          target: '第三方验证',
          description: '支持第三方验证机构的数据质量验证'
        },
        {
          metric: '报告合规',
          target: '多标准支持',
          description: '支持各国碳披露法规和国际报告标准'
        }
      ]
    }
  ];

  // 渲染产品概览
  const renderOverview = () => (
    <div className="space-y-8">
      <div className="text-center mb-8">
        <FileText className="h-12 w-12 text-green-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">产品需求概览</h2>
        <p className="text-gray-600">碳足迹管理模块的整体产品目标和关键指标</p>
      </div>

      {/* 产品基本信息 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">基本信息</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-2">版本信息</h4>
            <p className="text-green-600 font-semibold">{productOverview.version}</p>
            <p className="text-gray-500 text-sm">预计发布: {productOverview.release_date}</p>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-2">目标用户</h4>
            <div className="flex flex-wrap gap-2">
              {productOverview.target_users.map((user, idx) => (
                <span key={idx} className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
                  {user}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 产品目标 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">产品目标</h3>
        <p className="text-gray-700 leading-relaxed">{productOverview.product_goal}</p>
      </div>

      {/* 关键指标 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">关键成功指标</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {productOverview.key_metrics.map((metric, idx) => (
            <div key={idx} className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-900 mb-2">{metric.metric}</h4>
              <div className="flex items-center justify-between">
                <span className="text-green-600 font-semibold">{metric.target}</span>
                <span className="text-gray-500 text-sm">当前: {metric.current}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // 渲染功能需求
  const renderFunctionalRequirements = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <CheckCircle className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">功能需求规范</h2>
        <p className="text-gray-600">详细的功能点描述和验收标准</p>
      </div>

      {functionalRequirements.map((fr) => (
        <div key={fr.id} className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <span className="inline-block px-2 py-1 bg-gray-100 text-gray-800 text-xs rounded-full mb-2">
                {fr.id}
              </span>
              <h3 className="text-xl font-semibold text-gray-900">{fr.title}</h3>
              <p className="text-gray-600 mt-1">{fr.description}</p>
            </div>
            <div className="flex items-center space-x-2">
              <span className={`px-2 py-1 text-xs rounded-full ${
                fr.priority === 'P0' ? 'bg-red-100 text-red-800' :
                fr.priority === 'P1' ? 'bg-orange-100 text-orange-800' :
                'bg-yellow-100 text-yellow-800'
              }`}>
                {fr.priority}
              </span>
              <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                {fr.category}
              </span>
            </div>
          </div>

          <div className="space-y-4">
            {fr.detailed_requirements.map((req) => (
              <div key={req.id} className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-900 mb-2">{req.requirement}</h4>
                
                <div className="mb-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-2">验收标准：</h5>
                  <ul className="space-y-1">
                    {req.acceptance_criteria.map((criteria, idx) => (
                      <li key={idx} className="flex items-start">
                        <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 mr-2 flex-shrink-0" />
                        <span className="text-sm text-gray-600">{criteria}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="bg-gray-50 rounded p-3">
                  <h5 className="text-sm font-medium text-gray-700 mb-1">技术实现要点：</h5>
                  <p className="text-sm text-gray-600">{req.technical_notes}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );

  // 渲染非功能需求
  const renderNonFunctionalRequirements = () => (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <Shield className="h-12 w-12 text-purple-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">非功能需求</h2>
        <p className="text-gray-600">性能、安全、合规等技术指标要求</p>
      </div>

      {nonFunctionalRequirements.map((category) => (
        <div key={category.category} className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-6">{category.category}</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {category.requirements.map((req, idx) => (
              <div key={idx} className="border border-gray-200 rounded-lg p-4">
                <h4 className="font-medium text-gray-900 mb-2">{req.metric}</h4>
                <div className="text-2xl font-bold text-green-600 mb-2">{req.target}</div>
                <p className="text-sm text-gray-600">{req.description}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );

  // 渲染流程图
  const renderProcessDiagrams = () => (
    <div className="space-y-8">
      <div className="text-center mb-8">
        <GitBranch className="h-12 w-12 text-indigo-600 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-900 mb-2">业务流程图</h2>
        <p className="text-gray-600">系统核心业务流程、权限矩阵和架构设计</p>
      </div>

      {/* 碳足迹核算流程图 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">碳足迹核算流程</h3>
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="grid grid-cols-1 md:grid-cols-6 gap-4 items-center">
            {[
              { step: '数据收集', actor: '环境分析师', status: 'collect', icon: Database },
              { step: '数据验证', actor: '系统', status: 'validate', icon: CheckCircle },
              { step: '排放计算', actor: '计算引擎', status: 'calculate', icon: Calculator },
              { step: '结果审核', actor: '碳管理专员', status: 'review', icon: Users },
              { step: '报告生成', actor: '系统', status: 'report', icon: FileText },
              { step: '结果发布', actor: '合规专员', status: 'publish', icon: Globe }
            ].map((item, idx) => (
              <React.Fragment key={idx}>
                <div className="text-center">
                  <div className={`w-16 h-16 rounded-full mx-auto mb-2 flex items-center justify-center ${
                    item.status === 'collect' ? 'bg-blue-100 text-blue-600' :
                    item.status === 'validate' ? 'bg-yellow-100 text-yellow-600' :
                    item.status === 'calculate' ? 'bg-orange-100 text-orange-600' :
                    item.status === 'review' ? 'bg-purple-100 text-purple-600' :
                    item.status === 'report' ? 'bg-indigo-100 text-indigo-600' :
                    'bg-green-100 text-green-600'
                  }`}>
                    <item.icon className="h-6 w-6" />
                  </div>
                  <div className="font-medium text-gray-900">{item.step}</div>
                  <div className="text-sm text-gray-600">{item.actor}</div>
                </div>
                {idx < 5 && (
                  <div className="hidden md:flex justify-center">
                    <ArrowRight className="h-6 w-6 text-gray-400" />
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* 减排目标管理流程 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">减排目标管理流程</h3>
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-center">
            {[
              { step: '基准设定', actor: '可持续发展总监', status: 'baseline' },
              { step: '目标制定', actor: '碳管理专员', status: 'target' },
              { step: '路径规划', actor: '系统', status: 'planning' },
              { step: '进度跟踪', actor: '环境分析师', status: 'tracking' },
              { step: '效果评估', actor: '可持续发展总监', status: 'evaluation' }
            ].map((item, idx) => (
              <React.Fragment key={idx}>
                <div className="text-center">
                  <div className={`w-16 h-16 rounded-full mx-auto mb-2 flex items-center justify-center ${
                    item.status === 'baseline' ? 'bg-blue-100 text-blue-600' :
                    item.status === 'target' ? 'bg-green-100 text-green-600' :
                    item.status === 'planning' ? 'bg-yellow-100 text-yellow-600' :
                    item.status === 'tracking' ? 'bg-orange-100 text-orange-600' :
                    'bg-purple-100 text-purple-600'
                  }`}>
                    {item.status === 'baseline' ? <BarChart3 className="h-6 w-6" /> :
                     item.status === 'target' ? <Leaf className="h-6 w-6" /> :
                     item.status === 'planning' ? <GitBranch className="h-6 w-6" /> :
                     item.status === 'tracking' ? <Clock className="h-6 w-6" /> :
                     <CheckCircle className="h-6 w-6" />}
                  </div>
                  <div className="font-medium text-gray-900">{item.step}</div>
                  <div className="text-sm text-gray-600">{item.actor}</div>
                </div>
                {idx < 4 && (
                  <div className="hidden md:flex justify-center">
                    <ArrowRight className="h-6 w-6 text-gray-400" />
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* 权限控制矩阵 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">权限控制矩阵</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full table-auto">
            <thead>
              <tr className="bg-gray-50">
                <th className="px-4 py-2 text-left font-medium text-gray-900">功能模块</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">环境分析师</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">碳管理专员</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">可持续总监</th>
                <th className="px-4 py-2 text-center font-medium text-gray-900">合规专员</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {[
                { module: '数据收集', analyst: '读写', manager: '读写', director: '只读', compliance: '只读' },
                { module: '碳足迹计算', analyst: '读写', manager: '读写', director: '只读', compliance: '只读' },
                { module: '目标管理', analyst: '只读', manager: '读写', director: '读写', compliance: '只读' },
                { module: '供应链管理', analyst: '只读', manager: '读写', director: '读写', compliance: '只读' },
                { module: '报告披露', analyst: '只读', manager: '只读', director: '读写', compliance: '读写' },
                { module: '系统设置', analyst: '无权限', manager: '只读', director: '读写', compliance: '只读' }
              ].map((row, idx) => (
                <tr key={idx}>
                  <td className="px-4 py-2 font-medium text-gray-900">{row.module}</td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.analyst === '读写' ? 'bg-green-100 text-green-800' :
                      row.analyst === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.analyst}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.manager === '读写' ? 'bg-green-100 text-green-800' :
                      row.manager === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.manager}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.director === '读写' ? 'bg-green-100 text-green-800' :
                      row.director === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.director}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-center">
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      row.compliance === '读写' ? 'bg-green-100 text-green-800' :
                      row.compliance === '只读' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {row.compliance}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* 系统架构图 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">系统架构设计</h3>
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* 数据层 */}
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
              <h4 className="font-medium text-blue-900 mb-3">数据收集层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">能源数据接入</div>
                <div className="bg-white rounded p-2 text-sm">生产数据接入</div>
                <div className="bg-white rounded p-2 text-sm">交通数据接入</div>
                <div className="bg-white rounded p-2 text-sm">供应链数据</div>
              </div>
            </div>

            {/* 计算层 */}
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
              <h4 className="font-medium text-green-900 mb-3">计算分析层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">排放因子库</div>
                <div className="bg-white rounded p-2 text-sm">计算引擎</div>
                <div className="bg-white rounded p-2 text-sm">分析算法</div>
                <div className="bg-white rounded p-2 text-sm">预测模型</div>
              </div>
            </div>

            {/* 应用层 */}
            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
              <h4 className="font-medium text-purple-900 mb-3">应用服务层</h4>
              <div className="space-y-2">
                <div className="bg-white rounded p-2 text-sm">目标管理</div>
                <div className="bg-white rounded p-2 text-sm">报告生成</div>
                <div className="bg-white rounded p-2 text-sm">可视化展示</div>
                <div className="bg-white rounded p-2 text-sm">API服务</div>
              </div>
            </div>
          </div>

          {/* 数据流向 */}
          <div className="mt-6 flex items-center justify-center space-x-4">
            <div className="text-center">
              <div className="text-sm text-gray-600">数据收集</div>
              <ArrowDown className="h-6 w-6 text-gray-400 mx-auto mt-1" />
            </div>
            <div className="text-center">
              <div className="text-sm text-gray-600">计算分析</div>
              <ArrowDown className="h-6 w-6 text-gray-400 mx-auto mt-1" />
            </div>
            <div className="text-center">
              <div className="text-sm text-gray-600">应用服务</div>
            </div>
          </div>
        </div>
      </div>

      {/* 供应链碳管理流程 */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-6">供应链碳管理泳道图</h3>
        <div className="bg-gray-50 rounded-lg p-6 overflow-x-auto">
          <div className="min-w-[800px]">
            <div className="grid grid-cols-4 gap-4">
              {/* 泳道标题 */}
              <div className="bg-green-100 p-3 rounded font-medium text-center">企业碳管理</div>
              <div className="bg-blue-100 p-3 rounded font-medium text-center">供应商管理</div>
              <div className="bg-orange-100 p-3 rounded font-medium text-center">数据收集</div>
              <div className="bg-purple-100 p-3 rounded font-medium text-center">效果评估</div>

              {/* 流程步骤 */}
              <div className="bg-green-50 border border-green-200 rounded p-3 text-sm">
                制定供应链<br/>减排策略
                <span className="text-xs text-gray-600 block mt-1">设定目标和要求</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-blue-50 border border-blue-200 rounded p-3 text-sm">
                供应商评估<br/>和选择
                <span className="text-xs text-gray-600 block mt-1">碳足迹评估筛选</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-orange-50 border border-orange-200 rounded p-3 text-sm">
                供应商数据<br/>收集管理
                <span className="text-xs text-gray-600 block mt-1">碳排放数据上报</span>
              </div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>

              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-white border border-gray-200 rounded p-3 opacity-50"></div>
              <div className="bg-purple-50 border border-purple-200 rounded p-3 text-sm">
                减排效果<br/>评估反馈
                <span className="text-xs text-gray-600 block mt-1">绩效评价改进</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="bg-gradient-to-br from-green-50 to-white min-h-screen">
      {/* 紧凑的标签导航 */}
      <div className="bg-white/80 backdrop-blur-sm shadow-sm border-b border-green-200/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex space-x-1 py-2">
            {[
              { id: 'overview', name: '产品概览', icon: FileText },
              { id: 'functional', name: '功能需求', icon: CheckCircle },
              { id: 'non-functional', name: '非功能需求', icon: Shield },
              { id: 'diagrams', name: '流程图', icon: GitBranch }
            ].map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveSection(tab.id)}
                  className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium text-sm transition-all duration-200 ${
                    activeSection === tab.id
                      ? 'bg-green-500 text-white shadow-md'
                      : 'text-gray-600 hover:bg-green-50 hover:text-green-600'
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  <span>{tab.name}</span>
                </button>
              );
            })}
          </nav>
        </div>
      </div>

      {/* 主内容区域 - 紧凑布局 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {activeSection === 'overview' && renderOverview()}
        {activeSection === 'functional' && renderFunctionalRequirements()}
        {activeSection === 'non-functional' && renderNonFunctionalRequirements()}
        {activeSection === 'diagrams' && renderProcessDiagrams()}
      </div>
    </div>
  );
};

export default CarbonFootprintPRDDesign; 